<template>
	<view>
		<view class="tiem_wrap" v-for="item in hosList" :key="item._id">
			<view class="address">
				<view>{{item.Hospital}}</view>
				<view>{{item.address}}</view>
			</view>
			<u-picker :show="show" :columns="columns"  @confirm="toConfirm"
			@cancel="toClose">
				
			</u-picker>
			<view class="sel">
				<view>当前选择：{{sel}}</view>
				<u-button type="primary" @click="show = true">疫苗种类选择</u-button>
			</view>
			<!--  二层循环 -->
			<view class="times" v-for="(titem,index) in item.lasting" > 
				 <view class="time_title">{{titem.period}}</view>
				 <view class="time_info" >
					 <!-- 三层循环 -->
					 <view  :class="infoItem.start_time==selTime?'active':''"  v-for="infoItem in titem.time" :key="infoItem.when" @click="toSelTime(infoItem,titem)">
					  {{infoItem.start_time}}--{{infoItem.end_time}}
					  --还可约{{infoItem.over}}人
					 </view>
				 </view>
			</view>
			<view class="week_title">本周的预约</view>
			<view class="week">
				<view :class="dateFlag?'active':''" v-for="witem in item.week" :key="item.data" @click="toChange(witem)">
						<view>
							{{witem.date}} {{witem.day}}
						</view>
						<view>
							{{witem.Have}}
						</view>
				</view>
			</view>
		</view>
		<view style="margin-top: 20px;">
			<u-button type="primary" @click="toYuyue">去预约</u-button>
		</view>
	</view>
</template>

<script>
	import {getXinTimes} from '@/api/xinguan.js'
	export default {
			data(){
				return {
					dateFlag:true, //控制日期选择样式的
					date:"",//选择的日期
					 show:false,
					  columns: [ //疫苗种类
					     
					  ],
					  period:"",//时间段
					  selTime:"",//选择的开始时间
					  selObj:{},//存储的选择的时间
					  sel:"请选择",//疫苗种类
					 hosList:[]//医院列表
				}
			},
			onLoad(){
				console.log("99999999999999")
				this.getTimes()
			},
			methods:{
				// 调用新冠疫苗时段列表
				async getTimes(){
					let res=await getXinTimes();
					console.log(res,"********")
					this.hosList=res.data;
					this.$set(this.columns,0,res.data[0].company)//疫苗种类
					console.log(this.columns)
				},
				toConfirm(obj){ //picker 组件的确定回调
					console.log(obj)
					
					this.sel=obj.value[0];
					this.show=false;
				},
				toClose(){
					this.show=false;
				},
				toSelTime(item,titem){//当前选中的开始的时间
					this.selTime=item.start_time;

					this.period=titem.period; //选择的时间段 上午或下午
					this.when=item.when; //当前的下标
					// 具体时间段
					this.reserve_time=item.start_time+"-"+item.end_time;
					
				},
				toChange(item){
					this.date=item.date
					this.dateFlag=!this.dateFlag;
				},
				toYuyue(){ //去预约 新冠
					// 传递 
					// date日期 
					// period上午时段  或下午时段
					// reserve time 9:00-12：00
					// when 下标
					if(this.sel=="请选择"){
						uni.showToast({
							title:"必须选择 疫苗种类"
						})
						return 
					}
					if(!this.selTime){
						uni.showToast({
							title:"必须选择时间段"
						})
						return 
					}
					if(!this.dateFlag){
						uni.showToast({
							title:"必须选择日期"
						})
						return 
					}
					// 跳转并传参
					uni.navigateTo({
						url:`/pages/xingaunTime/sure?date=${this.date}&period=${this.period}&reserve_time=${this.reserve_time}&when=${this.when}`
					})
					
				}
			}
	}
</script>

<style lang="scss">
	.address{
		width: 100vw;
		height: 200px;
		border-radius: 40px;
		padding: 20px 40px;
		box-sizing: border-box;
		background: skyblue;
		font-size:20px;
		view{
			margin-top: 10px;
		}
	
	}
	.sel{
		width: 200px;
		height: 40px;
		margin: 20px auto;
	}
	.times{
		width: 100vw;
		.time_title{
			color:red;
			font-size: 20px;
			
		}
		.time_info{
			display: flex;
			.active{
				border: 2px solid red;
			}
			view{
				margin-top: 20px;
				margin-bottom: 20px;
				width: 300px;
				margin-left: 20px;
				height: 50px;
				border: 1px solid blue;
				text-align: center;
				line-height: 50px;
			}
		}
	}
	.week{
		display: flex;
		.active{
			border: 2px solid red;
		}
		>view{
			width: 180px;
			height: 50px;
			border: 1px solid blue;
			text-align: center;
			line-height: 50px;
			display: flex;
			margin-left:20px;
			view{
				flex:1;
				text-align: center;
				
			}
		}
	}
	.week_title{
		color:red;
		margin: 20px 0;
	}
</style>